<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>仿《原神》官网响应式移动端</title>
    <!-- 注意: 里面调用了本地json需要先下载Live Server插件,再用插件打开 -->
    <link rel="stylesheet" type="text/css" href="./css/home.css">
</head>
<body>
    <div id="fram" class="m-root" style="position: absolute; left: 0px; top: 0px; visibility: visible;">
        <div class="m-home-index">
            <div class="m-header">
                <header style="transform: translate3d(0, 0, 0);" data-v-6456f2d1>
                    <img src="./images/logo-header.png" alt="logo" data-v-6456f2d1>
                    <button class="header-toggle" data-v-6456f2d1></button>
                </header>
                <div class="header-menu" data-v-6456f2d1>
                    <div class="menu" data-v-6456f2d1>
                        <div data-v-6456f2d1>
                            <button class="menu-close" data-v-6456f2d1>close</button>
                        </div>
                        <nav class="menu-list" data-v-6456f2d1>
                            <a href="#" aria-current="page" class="nuxt-link-exact-active nuxt-link-active active" data-v-6456f2d1>首页</a>
                            <a href="#" data-v-6456f2d1>新闻</a>
                            <a href="#" data-v-6456f2d1>角色</a>
                            <a href="#" data-v-6456f2d1>世界</a>
                            <a href="#" data-v-6456f2d1>漫画</a>
                            <a href="#" data-v-6456f2d1 target="_blank" class="menu-item">社区</a>
                            <a href="#" data-v-6456f2d1 target="_blank" class="menu-item">赛事</a>
                            <div class="menu-loginbox" data-v-6456f2d1>
                                <div class="login-btn" data-v-6456f2d1>
                                    <img data-v-6456f2d1="" src="./images/login.png" alt="">
                                    登&nbsp;录
                                </div>
                            </div>
                            <a href="#" data-v-6456f2d1 target="_blank" class="menu-cs">
                                <img data-v-6456f2d1="" src="./images/care.png" alt="">
                                 成长关爱系统
                            </a>
                        </nav>
                    </div>
                </div>
            </div>
            <div class="m-home">
                <section class="m-poster">
                    <div class="m-bg-wrap">
                        <video class="m-bg-video" src="./images/002.mp4" muted autoplay loop ></video>
                    </div>
                    <h1 class="logo">
                        <img src="./images/logo.png" alt="logo">
                    </h1>
                    <div class="m-poster-main">
                        <div class="m-video-entry">
                            <button class="m-video-open"></button>
                        </div>
                        <div class="ys-download-m">
                            <div class="ys-download-m-wrapper">
                                <!-- download button -->
                                <div class="ys-download-m-btns">
                                    <a href="#" class="ys-download-m-btn">
                                        <img src="./images/download-game.png" alt="game">
                                    </a>
                                    <a href="#" class="ys-download-m-btn">
                                        <img src="./images/download-taptap.png" alt="toptop">
                                    </a>
                                </div>
                                <!-- txt -->
                                <div class="ys-download-m-txts">
                                    <p class="ys-download-m-txt1">开发者名称：上海米哈游天命科技有限公司</p>
                                    <p class="ys-download-m-txt2">
                                        <span>当前版本：3.3.0</span>
                                        <span>更新时间：2022.12.17</span>
                                    </p>
                                    <p class="ys-download-m-txt3">
                                        <a href="#">隐私协议</a>
                                        <a href="#">用户权限</a>
                                    </p>
                                </div>
                                
                            </div>
                        </div>
                        <div class="m-poster-badge">
                            <img src="./images/tips-img.png" alt="">
                        </div>
                        <div class="m-poster-arrows">
                            <div class="m-poster-arrow m-poster-arrow-1"></div>
                            <div class="m-poster-arrow m-poster-arrow-2"></div> 
                            <div class="m-poster-arrow m-poster-arrow-3"></div>
                        </div>
                        <div class="qisheng">
                            <img src="./images/qisheng.png" alt="qusheng" class="qs-img">
                        </div>
                    </div>
                </section>
                <section class="m-news">
                    <h3>
                        新闻资讯
                    </h3>
                    <div class="m-news-main">
                        <div class="m-news-top">
                            <div class="swiper-container m-news-swiper swiper-container-initialized swiper-container-horizontal swiper-container-ios">
                                <ul class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(0px, 0px, 0px);">
                                    <li class="swiper-slide swiper-slide-duplicate swiper-slide-next" data-swiper-slide-index="3" style="width: 351px;">
                                        <a target="_blank" class="m-news-link">
                                            <img src="./images/banner04.png" draggable="false" class="m-news-banner">
                                        </a>
                                    </li>
                                    <li class="swiper-slide swiper-slide-duplicate swiper-slide-next" data-swiper-slide-index="0" style="width: 351px;">
                                        <a target="_blank" class="m-news-link">
                                            <img src="./images/banner01.png" draggable="false" class="m-news-banner">
                                        </a>
                                    </li>
                                    <li class="swiper-slide swiper-slide-duplicate swiper-slide-next" data-swiper-slide-index="1" style="width: 351px;">
                                        <a target="_blank" class="m-news-link">
                                            <img src="./images/banner02.png" draggable="false" class="m-news-banner">
                                        </a>
                                    </li>
                                    <li class="swiper-slide swiper-slide-duplicate swiper-slide-next" data-swiper-slide-index="2" style="width: 351px;">
                                        <a target="_blank" class="m-news-link">
                                            <img src="./images/banner03.png" draggable="false" class="m-news-banner">
                                        </a>
                                    </li>
                                    <li class="swiper-slide swiper-slide-duplicate swiper-slide-next" data-swiper-slide-index="3" style="width: 351px;">
                                        <a target="_blank" class="m-news-link">
                                            <img src="./images/banner04.png" draggable="false" class="m-news-banner">
                                        </a>
                                    </li>
                                    <li class="swiper-slide swiper-slide-duplicate swiper-slide-next" data-swiper-slide-index="0" style="width: 351px;">
                                        <a target="_blank" class="m-news-link">
                                            <img src="./images/banner01.png" draggable="false" class="m-news-banner">
                                        </a>
                                    </li>
                                </ul>
                            </div>
                            <ul class="m-news-pager">
                                <li class="m-news-pager-item m-news-pager-item-0 m-news-pager-item-active"></li>
                                <li class="m-news-pager-item m-news-pager-item-1"></li>
                                <li class="m-news-pager-item m-news-pager-item-2"></li>
                                <li class="m-news-pager-item m-news-pager-item-3 "></li>
                            </ul>
                        </div>
                        <div class="m-news-content">
                            <ul class="m-news-tab-list">
                                <li data-cate="10" class="m-news-tab-item m-news-tab-item-active">最新</li>
                                <li data-cate="11" class="m-news-tab-item">新闻</li>
                                <li data-cate="12" class="m-news-tab-item">公告</li>
                                <li data-cate="258" class="m-news-tab-item">活动</li>
                            </ul> 
                            <ul class="m-news-list"><!----> 
                                <li>
                                    <a href="#" class="m-news-item" title="《原神》3.4版本 「磬弦奏华夜」内容专题页现已上线">
                                        <p class="m-news-title ellipsis">《原神》3.4版本 「磬弦奏华夜」内容专题页现已上线</p> 
                                        <p class="m-news-date">2023-01-12</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="m-news-item" title="「嗯…最近乱七八糟的申请表有点多，都驳回吧。」">
                                        <p class="m-news-title ellipsis">「嗯…最近乱七八糟的申请表有点多，都驳回吧。」</p> 
                                        <p class="m-news-date">2023-01-12</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="m-news-item" title="《原神》艾尔海森角色PV——「疑问与沉默」">
                                        <p class="m-news-title ellipsis">《原神》艾尔海森角色PV——「疑问与沉默」</p> 
                                        <p class="m-news-date">2023-01-12</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="m-news-item" title="「派蒙的星光考察」——《原神》角色主题OST宣传H5正式上线">
                                        <p class="m-news-title ellipsis">「派蒙的星光考察」——《原神》角色主题OST宣传H5正式上线</p> 
                                        <p class="m-news-date">2023-01-11</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="m-news-item" title="【须弥冒险笔记·千壑沙地篇】002期·风沙中的敌人">
                                        <p class="m-news-title ellipsis">【须弥冒险笔记·千壑沙地篇】002期·风沙中的敌人</p> 
                                        <p class="m-news-date">2023-01-11</p>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <a href="#" class="m-news-more">更多资讯</a>
                </section>
                <section class="m-city">
                    <ul class="m-city-list">
                        <li class="m-city-list-item" style="background-image:url(./images/mengdecheng.png);">
                            <a href="#" class="footer-m-navitem">蒙德城</a>
                        </li>
                        <li class="m-city-list-item" style="background-image:url(./images/liyuegang.png);">
                            <a href="#" class="footer-m-navitem">璃月港</a>
                        </li>
                        <li class="m-city-list-item" style="background-image:url(./images/daoqicheng.png);">
                            <a href="#" class="footer-m-navitem">稻妻城</a>
                        </li>
                        <li class="m-city-list-item" style="background-image:url(./images/xumicheng.png);">
                            <a href="#" class="footer-m-navitem">须弥城</a>
                        </li> 
                        <li class="m-city-list-item m-city-list-item3  m-city-list-item-disable">
                            <p>敬请期待</p>
                        </li>
                    </ul>
                </section>
                <div class="m-social">
                    <h3>关注我们</h3>
                    <div class="social-weixin">
                        <p>
                            <span></span>
                            关注原神
                            <span>微信公众号</span>
                        </p>
                        <img src="./images/social__wx.png" alt="">
                        <p>扫码关注微信</p>
                    </div>
            
                    <ul class="social-list">
                        <li class="social-list-items">
                            <a href="#">
                                <span></span>
                                关注原神
                                <span>官方微博</span>
                            </a>
                        </li>
                        <li class="social-list-items">
                            <a href="#">
                                <span></span>
                                关注原神
                                <span>TapTap</span>
                            </a>
                        </li>
                        <li class="social-list-items">
                            <a href="#">
                                <span></span>
                                关注原神
                                <span>官方社区</span>
                            </a>
                        </li>
            
                    </ul>
            
                    <div class="social-qq">
            
                        <p class="sq-top">
                            <span></span>
                            关注原神
                            <span>官方Q群</span>
                        </p>
            
                        <ul>
                            <li>
                                <a href="#" style="display: flex;">
                                    <label>原神米游社官方群</label>
                                    <p>
                                        272031457
                                        <span>(已满)</span>
                                    </p>
                                </a>
                            </li>
            
                            <li>
                                <a href="#" style="display: flex;">
                                    <label>原神官方玩家群13</label>
                                    <p>
                                        1065215618
                                        <span></span>
                                    </p>
                                </a>
                            </li>
                            <li>
                                <a href="#" style="display: flex;">
                                    <label>原神官方玩家群12</label>
                                    <p>
                                        1060406671
                                        <span></span>
                                    </p>
                                </a>
                            </li>
                            <li>
                                <a href="#" style="display: flex;">
                                    <label>原神官方玩家群11</label>
                                    <p>
                                        512047400
                                        <span></span>
                                    </p>
                                </a>
                            </li>
                            <li>
                                <a href="#" style="display: flex;">
                                    <label>原神官方玩家群10</label>
                                    <p>
                                        592500429
                                        <span></span>
                                    </p>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <footer id="m-footer">
                    <div>
                        <div x-ms-format-detection="none" class="mihoyo-cn-footer mihoyo-cn-footer-ys-mihoyo mobile">
                            <div class="footer-content">
                                <div class="footer-logo">
                                    <div style="display: flex; align-items: center;">
                                        <img src="./images/mihoyou.png" alt="">
                                        <span></span>
                                        <h1>
                                            <img src="./images/logo-footer.png" class="game-logo" alt="">
                                        </h1>
                                    </div>
                                </div>
                                <div class="footer-info">
                                    <div class="footer-advice">
                                        <div class="inline-info">
                                            <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=沪公网安备31010402001113号" rel="nofollow" class="footer-filing-item" target="_blank">沪公网安备31010402001113号</a>
                                            <span class="footer-filing-item">增值电信业务经营许可证：沪B2-20190555</span>
                                        </div>
                                    </div>
                                    <div class="footer-filing">
                                        <div class="footer-filing-content">
                                            <a href="https://beian.miit.gov.cn/#/Integrated/index" rel="nofollow" target="_blank" class="footer-filing-item">沪ICP备19018275号-4</a>
                                            <span class="footer-filing-item"> 沪网文〔2022〕1334-052号 </span>
                                            <span class="footer-filing-item">国新出审【2019】2978号</span>
                                        </div>
                                    </div>
                                    <div class="guanai-phone">未成年成长关爱热线：021-60371740 （服务时间：8:00-23:00）</div>
                                    <div class="mihoyo-copyright">© 2020 米哈游版权所有 | 上海米哈游影铁科技有限公司</div>
                                    <div class="complaint-phone">客服电话：400-666-6312</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </footer>
                <div aria-expanded="true" data-modal="mPv" class="v-modal-overlay">
                    <div class="v-modal-background-click">
                        <div class="v-modal-top-right"></div>
                        <div role="dialog" aria-modal="true" class="v-modal-box m-pv" style="top: 236px; left: 0px; width: 574px; height: auto;">
                            <div class="m-video-modal" >
                                <video id="videoPv" controls src="./images/click-video.mp4" style="object-fit: fill; width: 100%; height: auto;" ></video>
                            </div> 
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- landscape -->
    <div class="mihoyo-landscape">
        <div class="mihoyo-landscape-box">
            <img src="./images/fanzhuan.png" id="mihoyo_landscape_pic" style="width: 128px; height: 194px; display: inline-block; visibility: visible;" width="128" height="194">
            <span class="mihoyo-landscape-txt">为了更好的体验，请将手机/平板竖过来</span>
        </div>
    </div>
    <script src="./js/base.js"></script>
    <script src="./js/home.js"></script>
</body>
</html>